<!-- Main content -->
<section class="container-fluid">

  <div class="row">
    <div class="col-md-12">
      <div class="card card-primary">
        <div class="card-header">
          <h3 id="addTask_h3" class="card-title"></h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip"
              title="Collapse">
              <i class="fas fa-minus"></i></button>
          </div>
        </div>
        <form id="addTask_form">
          <div class="card-body">
            <div class="form-group">
              <label for="addTask_inputName">任务主题</label>
              <input type="text" id="addTask_inputName" name="taskTitle" class="form-control">
            </div>
            <div class="form-group">
              <label for="addTask_inputDescription">任务描述</label>
              <textarea id="addTask_inputDescription" name="taskContent" class="form-control" rows="4"></textarea>
            </div>

            <div class="form-group">
              <label for="addTask_reservationTime">起止时间</label>
              <input type="text" name="reservationTime" class="form-control pull-right col-md-6"
                id="addTask_reservationTime">
            </div>
          </div>
        </form>

        <!-- /.card-body -->
      </div>
      <!-- /.card -->
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <!-- 不同的任务公用同一组件，动态指定onclick -->
      <input id="addTask_from_button" type="button" value="创建新任务" onclick="" class="btn btn-success float-right">
    </div>
  </div>
</section>
<!-- /.content -->
<script>
  $('#addTask_reservationTime').daterangepicker({
    timePicker: true,
    timePickerIncrement: 30,
    locale: {
      applyLabel: '确认',
      cancelLabel: '取消',
      fromLabel: '起始时间',
      toLabel: '结束时间',
      customRangeLabel: '自定义',
      format: "YYYY-MM-DD hh:mm:ss",
      daysOfWeek: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      firstDay: 1,
      separator: ' 至 '
    },
    drops: 'up', // 日期选择框的弹出位置
  });
</script>